I have the following at header.php

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

And the following at footer.php

<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>

At functions.php, i have added a bootstrap modal inside wpb_hook_javascript (id="tiopatinhas")

All I want at this point is to show the modal programatically.

Also inside wpb_hook_javascript, I have the following

<script>
   var merda = document.getElementById("tiopatinhas");

The above one works fine, but then I try the following:

merda.show();   //Doesn't work

var merda = new bootstrap.Modal(document.getElementById('tiopatinhas')); //Doesn't work

$("#tiopatinhas").modal('show');  // Doesn't work

I know there's something related to "childs". I know the last one is related to something called jQuery, which I read is deprecated. So, I don't want to use it.

Any ideas how can I call the modal programatically?

PS I have a somehow good logic. In the past, I was an experienced C, C++ and ASM... in the 80s and 90s! :). But, nowadays I know close to nothing about all of those frameworks, layers and so on.

Any help will be deeply appreciated.